<template>
	<!-- 最近门店 -->
	<u-popup :show="showStoreAlert" mode='center' :closeOnClickOverlay='false' round="25">
		<view class="storeContent">
			<view class="title">
				为您推荐{{storeInfo.distance?'最近的':''}}服务门店
			</view>
			<view class="content">
				
				<view class="jk-flex-between">
					<text style="font-size: 30upx;color: #131313;font-weight: bold;">{{filterNull(storeInfo.storeName)}}</text>
					<text style="font-size: 20upx;color: #666;margin-top: 20rpx;">{{filterNull(storeInfo.contactAddress)}}</text>
					
				</view>
				
				<view class="jk-flex-between" style="align-items: flex-end;margin-left: 20rpx;" v-if="storeInfo.distance">
					<text class="distance">距离最近</text>
					<text style="font-size: 22upx;color: #131313;margin-top: 10rpx;white-space: nowrap;">距离{{filterNull(storeInfo.distanceDesc)}}</text>
				</view>
				
				
			</view>
			
			<view class="chooseBtn" @click="confimStore">
				确认选择
			</view>
			
			<view class="chooseOtherStore" @click="selOther">
				选择其他门店
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		computed: {
		    // storeInfo() {
		    //     return this.$store.state.app.storeInfo;
		    // },
		},
		data(){
			return{
				storeInfo:{},
				showStoreAlert:false,
			}
		},
		mounted() {
			uni.$on('store_wait_select', res=>{
				this.showStoreAlert = true;
				console.log('我收到了展示门店', res);
				this.storeInfo = res;
			})
			uni.$on('store_selected', res=>{
				this.showStoreAlert = false;
			})
		},
		methods:{
			confimStore(){
				this.showStoreAlert = false;
				
				this.$store.commit('app/setStoreInfo', this.storeInfo);
				this.$store.commit('user/savedeptId', this.storeInfo.storeId, { root: true });
				uni.setStorageSync('deptId', this.storeInfo.storeId);
				uni.$emit('store_selected', true);
			},
			
			selOther(){
				
				// 跳转去地址选择页面
				uni.navigateTo({
					url: '/pages/select-store/select-store',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jk-flex-between {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.storeContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 570rpx;
		border-radius: 16rpx;
		padding: 50rpx;

		.title {
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0.85rpx;
		}

		.content {
			margin: 40rpx 20rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-between;

		}
		
		.chooseBtn {
			margin-top: 52rpx;
			width: 430rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background-color: #F83C57;
			color: #fff;
			font-size: 32rpx;
			border-radius: 50rpx;
			letter-spacing: 0.85rpx;
		}

		.chooseOtherStore {
			color: #333;
			font-size: 32rpx;
			text-align: center;
			margin: 28rpx 0;
			letter-spacing: 0.85rpx;
			font-weight: bold;
		}
	}
	
	.distance {
		width: 108rpx;
		height: 36rpx;
		color: #F83C57;
		border: 1rpx solid #F83C57;
		border-radius: 6rpx;
		line-height: 36rpx;
		text-align: center;
		font-size: 22rpx;
	}
</style>
